<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>layui-demo</title> 
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/layui/css/layui.css"
	media="all">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/font-awesome-4.7.0/css/font-awesome.css" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<style type="text/css">
	.layui-table-cell{
		height:auto !important;
	} 
</style>
</head>
<body>
	<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
	<!-- <button class="layui-btn layui-btn-normal" lay-event="add">添加</button> -->
    <button class="layui-btn layui-btn-normal" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-normal" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-normal" lay-event="isAll">验证是否全选</button>
  </div>
</script>

	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="getOrderdetail">查看订单详情</a>
  <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="resetpwd">重置密码</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> -->
</script>

	<!-- 查看订单详情 -->
	<div id="getOrderdetailDiv" style="display: none; width:900px; padding-top: 20px; padding-left: 50px" >
		<table class="layui-hide" id="test1" lay-filter="test"></table>
		<!-- <form class="layui-form" action="" lay-filter="example">

			<div class="layui-form-item">
				<label class="layui-form-label">商品编号</label>
				<div class="layui-input-block">
					<input type="text" name="productId" id="productId" lay-verify="title"
						autocomplete="off" readonly class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-input-block">
					<input type="text" name="productName" id="productName" lay-verify="title"
						autocomplete="off" placeholder="请输入商品名称" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品单价</label>
				<div class="layui-input-block">
					<input type="text" name="productPrice" id="productPrice" lay-verify="title"
						autocomplete="off" placeholder="请输入商品单价" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品库存</label>
				<div class="layui-input-block">
					<input type="text" name="productStock" id="productStock" lay-verify="title"
						autocomplete="off" placeholder="请输入商品库存" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品图片</label>
				<div class="layui-input-block">
					<input type="text" name="productImg" id="productImg" lay-verify="title"
						autocomplete="off" placeholder="请输入商品图片" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品位置</label>
				<div class="layui-input-block">
					<input type="text" name="productPosition" id="productPosition" lay-verify="title"
						autocomplete="off" placeholder="请输入商品位置" class="layui-input">
				</div>
			</div>						

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-normal btn-update" type="button"
						lay-submit="" lay-filter="demo1">立即提交</button>					
				</div>
			</div>
		</form> -->
	</div>
		


	<div class="wrap-container clearfix">
		<!-- 内容主体区域 -->
		<div>
			<div class="demoTable" style="font-size: 14px; padding: 10px">
				搜索用户名关键字：
				<div class="layui-inline">
					<input class="layui-input" name="id" id="demoReload"
						autocomplete="off">
				</div>
				<button class="layui-btn layui-btn-normal" data-type="reload">搜索</button>
			</div>
			<table class="layui-hide" id="test" lay-filter="test"></table>
		</div>
	</div>

	<div class="layui-footer">
			<!-- 底部固定区域 -->
			© 2020-2099 jaman.team - 版权所有
	</div>

	<script src="${pageContext.request.contextPath}/static/layui/layui.js"
		charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
		layui.use('table', function() {
			var table = layui.table;
			var myrender = table.render({
				elem : '#test',
				url : '${pageContext.request.contextPath}/orders/showOrdersList',//地址和springmvc中控制器地址一致
				toolbar : '#toolbarDemo',
				title : '订单数据表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'orderId',
					title : '订单ID',
					width : 240,
					fixed : 'left',
					//unresize : true,
					sort : true
				}, {
					field : 'userName',
					title : '用户名',
					width : 120,
					templet : '<div>{{d.users.userName}}</div>'
				}, {
					field : 'orderTotalprice',
					title : '订单总价',
					width : 120,
					edit : 'text',
					sort : true
				}, {
					field : 'payment',
					title : '付款方式',
					width : 150,
					sort : true,
					templet :  function(d){
						if (d.payment == 1) {
							return '微信银行卡支付';
						} else {
							return '微信零钱支付';
						}
		      }
				}, {
					field : 'paytime',
					title : '付款时间',
					width : 180,
					sort : true
				}, {
					field : 'orderStatus',
					title : '订单状态',
					width : 120,
					sort : true,
					templet :  function(d){
						if (d.payment == 1) {
							return '已支付';
						} else {
							return '未支付';
						}
					}
				}, {
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 160
				}  ] ],
				page : {
					theme : '#1E9FFF'
				},
				page : true,
				id : 'testReload'
			});

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				console.log();
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'getCheckData':
					var data = checkStatus.data;
					layer.alert(JSON.stringify(data));
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					layer.msg('选中了：' + data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选' : '未全选');
					break;
				// 添加
				case 'add':
					layer.open({
						type : 1//弹出层 div
						,
						area : [ '600px' ],
						shade : 0.6,
						id : 'lay_layuipro' //设定一个id，防止重复弹出
						,
						//content : $("#addFormDiv").html(),
						content : $("#addFormDiv"), //后面不用.html()

					});
					//表单的render
					layui.form.render();
				}
				;
			});

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				
				if(obj.event === 'getOrderdetail'){
					
					layer.open({
						type : 1//弹出层 div
						,
						area : [ '1000px','500px' ],
						shade : 0.6,
						id : 'lay_layuipro' //设定一个id，防止重复弹出
						,
						//content : $("#editFormDiv").html(),
						content : $("#getOrderdetailDiv"), //后面不用.html()

					});
					
					console.log(data.orderId);
					 var myrender1 = table.render({
						elem : '#test1',
						url : '${pageContext.request.contextPath}/orderdetail/showOrderdetailList?orderId=' + data.orderId,//地址和springmvc中控制器地址一致
						//toolbar : '#toolbarDemo',
						title : '订单详情数据表',
						cols : [ [ {
							field : 'orderdetailId',
							title : '订单详情ID',
							width : 200,
							fixed : 'left',
							unresize : true,
							sort : true				
						},  {							
							field : 'productImg',
							title : '商品图片',
							width : 240,
							fixed : 'left',
							templet : '<div><img src="{{d.product.productImg}}"></div>'	
						}, {
							field : 'productName',
							title : '商品名称',
							width : 180,
							templet : '<div>{{d.product.productName}}</div>'
						}, {
							field : 'productPrice',
							title : '商品单价',
							width : 120,
							templet : '<div>{{d.product.productPrice}}</div>',
							edit : 'text',
							sort : true
						}, {
							field : 'productCount',
							title : '商品数量',
							width : 120,								
							sort : true
						}  ] ],
						page : {
							theme : '#1E9FFF'
						},
						page : true,
						id : 'testReload1'
					}); 
					
				} 
				//console.log(obj)
				/* if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {

						//console.log(data); //得到的是当前行对应的数据信息
						//console.log("productId :" + data.productId);
						$.ajax({
							type : "DELETE", //提交方式
							url : "${pageContext.request.contextPath}/deleteProduct/"
									+ data.productId, //地址和springmvc中控制器地址一致
							success : function(cm) {
								layer.msg(cm.msg, {
									time : 2000
								//两秒延迟
								}, function() {
									if (cm.msg == "删除成功") {

										//obj.update(); ?? 理想
										//layer.close(index);;
										//parent.layer.closeAll();//关闭所有,简单粗暴
										//window.parent.location.reload();//刷新父页面

										//疯狂模式，关闭所有层
										layer.closeAll();

										//执行渲染
										myrender.reload();
									}

								});

							}
						});

					});
				} else if (obj.event === 'getOrderdetail') {

					//先给我们的表单元素赋值
					$("#productId").prop("value",data.productId);
					$("#productName").prop("value",data.productName);
					$("#productPrice").prop("value",data.productPrice);
					$("#productStock").prop("value",data.productStock);
					$("#productImg").prop("value",data.productImg);
					$("#productPosition").prop("value",data.productPosition);

					layer.open({
						type : 1//弹出层 div
						,
						area : [ '600px' ],
						shade : 0.6,
						id : 'lay_layuipro' //设定一个id，防止重复弹出
						,
						//content : $("#editFormDiv").html(),
						content : $("#getOrderdetailDiv"), //后面不用.html()

					});

					//表单的render
					layui.form.render();
				}  */
			});

			/*表格数据重载 模糊检索*/
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');

					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : { //检索的条件
							//传递的参数 key为参数名 {} 内传递的是参数的值
							/* key: {
							  
							  id: demoReload.val(),
							  username :....
							} */
							//只有一个key : value格式
							// keyword 传过去给控制器的参数名
							userkeyword : demoReload.val()
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			/*修改 表单的提交 按钮的单击事件 ，监听1 */
			$(document).on("click", ".btn-update", function() {
				//可以实现 比较麻烦....
				//console.log(layui.form.data);
			});

			//监听提交  新增加的代码  监听2
			layui.form.on('submit(demo1)', function(data) {
				/* layer.alert(JSON.stringify(data.field), {
					title : '最终的提交信息'
				}) */
				//表单中的数据 进行转换，得到一个json格式的字符串
				//console.log(JSON.stringify(data.field));
				//ajax请求实现访问控制器
				console.log(JSON.stringify(data.field));
				$.ajax({
					type : "put", //提交方式
					url : "${pageContext.request.contextPath}/updateProduct", ////地址和springmvc中控制器地址一致
					data : JSON.stringify(data.field), //提交给控制器的数据
					contentType : "application/json", //提交给控制的数据 格式
					success : function(cm) {
						layer.msg(cm.msg, {
							time : 2000
						//两秒延迟
						}, function() {
							if (cm.msg == "修改成功") {

								//layer.close(index);;
								//parent.layer.closeAll();//关闭所有,简单粗暴
								//window.parent.location.reload();//刷新父页面
								//疯狂模式，关闭所有层
								layer.closeAll();

								//执行渲染
								myrender.reload();

							}

						});

					}
				});
				
				return false;
			});
			
			//监听提交  监听增加事件
			layui.form.on('submit(demo2)', function(data) {
				/* layer.alert(JSON.stringify(data.field), {
					title : '最终的提交信息'
				}) */
				//表单中的数据 进行转换，得到一个json格式的字符串
				//console.log(JSON.stringify(data.field));
				//ajax请求实现访问控制器
				console.log(JSON.stringify(data.field));
				$.ajax({
					type : "post", //提交方式
					url : "${pageContext.request.contextPath}/addProduct", ////地址和springmvc中控制器地址一致
					data : JSON.stringify(data.field), //提交给控制器的数据
					dataType : "json",
					contentType : "application/json", //提交给控制的数据 格式
					success : function(cm) {
						layer.msg(cm.msg, {
							time : 2000
						//两秒延迟
						}, function() {
							if (cm.msg == "增加成功") {
								//疯狂模式，关闭所有层
								layer.closeAll();
								//执行渲染
								myrender.reload();
							}
						});
					}
				});
				// 不做表单提交
				return false;
			});

		});
	</script>


</body>
</html>